import styled from "styled-components";
import { HashRouter, Switch, Route, Link, Redirect } from "react-router-dom";

// 导入组件
import A from "./views/A";
import B from "./views/B";
import C from "./views/C";

// 导航区域的样式
const NavBox = styled.nav`
  a {
    margin-right: 10px;
    color: #000;
  }
`;

const App = () => {
  // Route 和 Link 这些组件都需要在HashRouter或BrowserRouter中使用
  /* 
    基于<HashRouter></HashRouter>把所有要渲染的内容包起来，开启hash路由
       + 后续使用到的<Route>、<Link>等，都需要在HashRouter中使用
       + 开启后，整个页面地址，默认会设置一个/#哈希值

    也可以使用history路由，BrowserRouter

    Link 实现路由切换/跳转的组件
        + 最后渲染完毕的结果依然是A
        + 他可以根据路由模式，自动设定点击A切换的方式
  */
  return (
    <HashRouter>
      {/* 导航部分 */}
      <NavBox>
        <Link to="/">A</Link>
        <Link to="/b">B</Link>
        <Link to="/c">C</Link>
      </NavBox>
      {/* 路由容器:每一次页面加载或则路由切换完毕，都会根据当前hash值，到这里和每一个Route进行匹配，
        把匹配到的组件，放到容器中渲染
      */}
      <div className="content">
        <Switch>
          <Route exact path="/" component={A} />
          <Route path="/b" component={B} />
          <Route
            path="/c"
            render={() => {
              // 当路由地址匹配后，先把render函数执行，返回的返回值就是我们需要渲染的内容
              // 在此函数中,可以处理一些事情,例如:登录态检验
              let isLogin = true;
              if (isLogin) {
                return <C />;
              }
              return <Redirect to="/login" />;
            }}
          />
          {/* 
          // 放在最后一项，path设置*或则不写：以上都不匹配，则执行这个规则
          <Route path="*" component={404组件} />
          // 也可以不设置404组件，而是重定向到默认/地址
          <Redirect from ="" to="" exact/>
            + from :从哪个地址来
            + to:重定向的地址
            + exact:是对from地址的修饰，开启精准匹配
        */}
          <Redirect to="/" />
        </Switch>
      </div>
    </HashRouter>
  );
};

export default App;
